<!--封装了全局尾部组件 私人订制表单-->
<template>
  <!-- 尾部表单 -->
  <div class="demandbox">
    <span>没有喜欢的路线?直接私人订制</span>
    <div class="Freeconsultation">提交需求>免费咨询>专人订制>轻松出行</div>
    <div>
      <input type="text" v-model="custom.destination" placeholder="目的地" class="name" />
      <input type="text" v-model="custom.phone" placeholder="手机号" class="phone" />
    </div>
    <div>
      <input type="text" v-model="custom.demand" placeholder="需求" class="purpose" />
    </div>
    <div class="end" @click="onSubmit">
      <span>提交需求</span>
    </div>
  </div>
  <!-- 尾部表单 -->
</template>
<script>
// 引入订制旅行API
import { customOrder } from '../server/order';

export default {
  data() {
    return {
      // 从浏览器缓存中获取用户信息
      token: localStorage.getItem('token'),
      // 订制旅行填写信息
      custom: { phone: '', destination: '', demand: '' },
    };
  },
  methods: {
    // 提交订制表单
    onSubmit() {
      var desReg = /^[\u4e00-\u9fa5]{2,}$/;
      var phoneReg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;

      if (!desReg.test(this.custom.destination)) {
        this.$toast.fail('请输入正确的目的地');
        return;
      }
      if (!phoneReg.test(this.custom.phone)) {
        this.$toast.fail('请输入正确的手机号');
        return;
      }
      if (this.custom.demand == '') {
        this.$toast.fail('需求不能为空');
        return;
      }
      // 如果用户未登录
      if (this.token == null) {
        this.$toast.fail('未登录,即将为您跳转登录页面');
        setTimeout(() => {
          this.$router.push('/login');
        }, 1000);
      } else {
        // 否则,用户已登录
        customOrder(this.token, this.custom)
          .then(() => {
            this.$toast.success('提交成功,客服将在24小时内与您联系');
            this.custom.phone = '';
            this.custom.destination = '';
            this.custom.demand = '';
          })
          .catch(() => {
            this.$toast.fail('提交失败,请稍后重试');
          });
      }
    },
  },
};
</script>
<style lang="scss">
.demandbox {
  text-align: center;
  width: 93%;
  height: 6.375rem;
  background-color: #f8f7f2;
  margin: 0 auto;
  border-radius: 0.3125rem;
  padding-top: 30px;
  margin-bottom: 0.1rem;
  span {
    font-size: 0.515rem;
  }
  .Freeconsultation {
    font-size: 14px;
  }
  .purpose {
    width: 75%;
    height: 1rem;
    border: 5px solid #f7f6f3;
    margin-bottom: 10px;
    padding-left: 10px;
    font-size: 17px;
    border-radius: 10px;
  }
  .name {
    border-radius: 10px;
    padding-left: 10px;
    font-size: 17px;
    margin-top: 10px;
    border: 5px solid #f7f6f3;
    width: 25%;
    height: 1rem;
    margin-right: 6px;
  }
  .phone {
    border-radius: 10px;
    padding-left: 10px;
    font-size: 17px;
    border: 5px solid #f7f6f3;
    height: 1rem;
    width: 44%;
    margin-bottom: 0.3rem;
  }
  .end {
    border-radius: 20px;
    margin: 0 auto;
    background-color: #5fc6c2;
    width: 80%;
    height: 1rem;
    span {
      color: white;
      line-height: 1rem;
      font-size: 19px;
    }
  }
}
</style>
